<template>
	<view class="warp">
		<view class="status_bar" style="background-color: #FFF;">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between; box-sizing: border-box;padding: 0 16rpx;background-color: #FFF;" >
			<view style="display: flex;justify-content: flex-start;align-items: center; box-sizing: border-box;">
				<view style="width: 72rpx;" @click="goBack">
					<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
						<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
					</view>
				</view>
				<view style="margin-left: 32rpx;display: flex;align-items: center;justify-content: center;">
					<image
						:src="expertUserInfo.avatar"
						style="width:48rpx;height: 48rpx;border-radius: 50%;"
					></image>
				</view>
				<view style="font-size: 32rpx;color: #232426;margin-left: 16rpx;font-weight: 500;">{{expertUserInfo.nickname}}</view>
				<view style="width: 36rpx;height: 36rpx;border-radius: 50%;background-color: #FFF0D8;margin-left: 16rpx;display: flex;justify-content: center;align-items: center; box-sizing: border-box;">
					<image
						src="/static/images/icon/fire.png"
						style="width:24rpx;height: 24rpx;"
					></image>
				</view>
			</view>
			
			<view style="display: flex;justify-content: flex-end;box-sizing: border-box;">
				<view style="display: flex;align-items: center;justify-content: center;" @click="showReport=true">
					<image
						src="/static/images/icon/warning.png"
						style="width:44rpx;height: 44rpx;"
					></image>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;margin:0 18rpx 0 36rpx;">
					<image
						src="/static/images/icon/share.png"
						style="width:44rpx;height: 44rpx;"
					></image>
				</view>
			</view>
		</view>
		<view style="width: 100%;background-color: #FFF;">
			<view style="margin-top: 16rpx;position: relative;">
				<u-swiper :list="banner_list" @change="e => current = e.current" height="945" >
					<view slot="indicator" class="indicator">
						<view
							class="indicator__dot"
							v-for="(item, index) in banner_list"
							:key="index"
							:class="[index === current && 'indicator__dot--active']"
						>
						</view>
					</view>
				</u-swiper>
				<view style="position: absolute;top: 40rpx;right: 40rpx;border-radius: 200rpx;background: rgba(0, 0, 0, 0.4);padding: 4rpx 16rpx;">
					<view style="color: #FFF;letter-spacing: 4rpx;font-size: 26rpx;" >{{current+1}}/{{banner_list.length}}</view>
				</view>
			</view>
			<view style="">
				<view style="display: flex;justify-content: flex-start;align-items: center;padding: 40rpx 32rpx 0;">
					<view>
						<u-image
							src="/static/images/icon/task_circle.png"
							width="28rpx"
							height="28rpx"
						></u-image>
					</view>
					<view style="color: #27C5D6;margin-left: 8rpx;letter-spacing: 0.28rpx;">任務需求</view>
				</view>
				<view style="margin-top: 20rpx;color: #232426;font-size: 32rpx;font-weight: 600;line-height: 140%;letter-spacing: 0.64rpx;padding: 0rpx 32rpx;">
					尋找可靠的遛狗達人
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 20rpx;padding: 20rpx 32rpx;">
					<view style="display: flex;justify-content: flex-start;align-items:center;">
						<view style="color: #27C5D6;font-size: 28rpx;font-weight: 510;">NT$</view>
						<view style="color: #27C5D6;font-size: 44rpx;font-weight: 600;margin-left: 10rpx;">1,300</view>
						<view style="color: #27C5D6;font-size: 24rpx;letter-spacing: 0.48rpx;margin-left: 10rpx;"> / 小時</view>
					</view>
					<view style="background-color: rgba(255, 165, 20, 0.10);border-radius: 44rpx;color: #FFA514;font-size: 24rpx;letter-spacing: 0.48rpx;padding: 16rpx 20rpx;">
						已有23人關注
					</view>
				</view>
				
				<!--guide-->
				<view v-if="guide" style="width: 100%;margin: 16rpx 0; padding: 24rpx 32rpx;display: flex;justify-content: space-between;box-sizing: border-box;align-items: center;">
					<view style="display: flex;justify-content: flex-start;align-items: center;">
						<view>
							<u-image
								src="/static/images/icon/lightning.png"
								width="40rpx"
								height="40rpx"
							></u-image>
						</view>
						<view style="margin-left: 16rpx;">
							第一次預約？簡單圖解流程
						</view>
						<view style="border: 1rpx solid #27C5D6;border-radius: 40rpx;color: #27C5D6;padding: 12rpx 24rpx;font-size: 28rpx;margin-left: 16rpx;">
							查看流程
						</view>
					</view>
					<view @click="guide=false;">
						<u-image
							src="/static/images/icon/close-2x.png"
							width="32rpx"
							height="32rpx"
						></u-image>
					</view>
				</view>
				<!--guide結束-->
				
				<view style="width: 100%;margin-bottom: 80rpx;box-sizing: border-box;">
					<view class="tab-nav" :class="{ 'fixed-nav': isFixed }">
						<view :class="{'tab-nav-item-active':navTab==1,'tab-nav-item':navTab!=1}" @click="changeNav(1)">簡介</view>
						<view :class="{'tab-nav-item-active':navTab==2,'tab-nav-item':navTab!=2}" @click="changeNav(2)">時間</view>
						<view :class="{'tab-nav-item-active':navTab==3,'tab-nav-item':navTab!=3}" @click="changeNav(3)">地點</view>
					</view>
					
					<!--簡介-->
					<view id="profile">
						<view class="tab-content">
							<view>
								<u-parse :content="richText"></u-parse>
							</view>
							<view style="width: 100%;margin: 56rpx 0;">
								<view style="padding: 2px 10px;border-radius: 6px;background:#F0F0F0;color:#6A707C;font-size: 28rpx;width: 156rpx;text-align: center;">形象管理</view>
							</view>
							<view style="color: #808690;font-size: 24rpx;">更新時間:2025/03/24</view>
						</view>
						<view style="border-top: 1rpx solid #F0F0F0;width: 100%;margin-top: 36rpx;">
							<view style="padding:36rpx 32rpx;">
								<view style="color: #020202;font-size: 28rpx;font-weight: 600"> 需求者 </view>
								<view style="display: flex;justify-content: space-between;margin-top: 40rpx;">
									<view style="display: flex;justify-content: flex-start;">
										<view>
											<u-image
												:src="expertUserInfo.avatar"
												width="84rpx"
												height="84rpx"
												shape="circle"
											></u-image>
										</view>
										<view style="margin-left: 20rpx;">
											<view style="display: flex;justify-content: flex-start;align-items: center;">
												<view style="font-size: 32rpx;color: #232426;font-weight: 600;">{{expertUserInfo.nickname}}</view>
												<view style="display: flex;justify-content: flex-start;align-items: center;margin-left: 16rpx;">
													<u-icon
													  size="32rpx"
													  name="star-fill"
													  color="#FFA514"
													></u-icon>
													<view style="color: #FFA514;font-size: 28rpx;font-weight: 500;margin-left: 4rpx;">4.50</view>
												</view>
											</view>
											<view style="color: #6A707C;font-size: 24rpx;margin-top: 8rpx;">花藝師、設計師</view>
										</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
					<!--簡介結束-->
					
					<!--時間-->
					<view style="padding:36rpx 32rpx;" id="timer">
						<view style="display: flex;justify-content: space-between;" @click="showReserve=true;">
							<view style="color: #020202;font-size: 28rpx;font-weight: 600;">時間</view>
							<view>
								<u-image
									src="/static/images/icon/right-icon.png"
									width="38rpx"
									height="38rpx"
								></u-image>
							</view>
						</view>
						<view style="margin-top: 28rpx;">
							<view style="display: flex;justify-content: flex-start;margin-bottom:36rpx;align-items: center;">
								<view style="color: #1AAEC0;background-color: #EDF5FF;padding:6rpx 12rpx;border-radius: 8rpx;height:52rpx;">
									週一
								</view>
								<view style="margin-left: 20rpx;color: #6A707C;font-size: 26rpx;line-height: 130%;width: 500rpx;">
									09:00-10:00、11:00-13:00、15:00-18:00、20:00-21:00
								</view>
							</view>
							<view style="display: flex;justify-content: flex-start;margin-bottom:36rpx;align-items: center;">
								<view style="color: #1AAEC0;background-color: #EDF5FF;padding:6rpx 12rpx;border-radius: 8rpx;height:52rpx;">
									週二
								</view>
								<view style="margin-left: 20rpx;color: #6A707C;font-size: 26rpx;line-height: 130%;width: 500rpx;">
									09:00-10:00、11:00-13:00、15:00-18:00
								</view>
							</view>
							<view style="display: flex;justify-content: flex-start;margin-bottom:36rpx;align-items: center;">
								<view style="color: #1AAEC0;background-color: #EDF5FF;padding:6rpx 12rpx;border-radius: 8rpx;height:52rpx;">
									週三
								</view>
								<view style="margin-left: 20rpx;color: #6A707C;font-size: 26rpx;line-height: 130%;width: 500rpx;">
									09:00-10:00、11:00-13:00、15:00-18:00
								</view>
							</view>
						</view>
					</view>
					<!--時間結束-->
					<view style="background-color: #F0F0F0;width: 100%;height: 16rpx;"></view>
					<!--地點-->
					<view style="padding:36rpx 32rpx;" id="address">
						<view style="display: flex;justify-content: space-between;">
							<view style="color: #020202;font-size: 28rpx;font-weight: 600;">地點</view>
							<view>
								<u-image
									src="/static/images/icon/right-icon.png"
									width="38rpx"
									height="38rpx"
								></u-image>
							</view>
						</view>
						<view style="width: 100%;margin-top: 24rpx;display: inline-flex;">
							<view style="display: flex;justify-content: flex-start;background-color: #EDF5FF;padding:16rpx 24rpx;border-radius: 12rpx;flex-wrap: nowrap;">
								<view>
									<u-image
										src="/static/images/icon/map-success.png"
										width="32rpx"
										height="32rpx"
									></u-image>
								</view>
								<view style="color: #1AAEC0;font-size: 28rpx;margin-left: 16rpx;">線上進行</view>
							</view>
						</view>
					</view>
					<!--地點結束-->
				</view>
				
				<view style="height: 80rpx;"></view>
				
				<!--底欄-->
				<view style="position: fixed;bottom: 0;left: 0; width: 100%;box-sizing: border-box;border-top: 1rpx solid #F6F8FA;padding: 20rpx 24rpx;z-index: 999;background-color: #FFF;">
					<view style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
						<view style="width:100rpx;text-align: center;">
							<image
								src="/static/images/icon/likes-black.png"
								width="44rpx"
								height="44rpx"
								style="display: block;margin: 0 auto;width: 44rpx;height: 44rpx;"
							></image>
							<view style="color: #232426;font-size: 24rpx;">2014</view>
						</view>
						<view style="width:100rpx;text-align: center;margin-left: 8rpx;">
							<image
								src="/static/images/icon/tag.png"
								width="44rpx"
								height="44rpx"
								style="display: block;margin: 0 auto;width: 44rpx;height: 44rpx;"
							></image>
							<view style="color: #232426;font-size: 24rpx;">2014</view>
						</view>
						<view style="margin-left: 24rpx;border-radius: 200rpx;border:2rpx solid #27C5D6;color: #27C5D6;text-align: center; ">
							<view style="padding:16rpx 40rpx;gap: 12rpx;font-size: 28rpx;">私訊</view>
						</view>
						<view style="margin-left: 24rpx;border-radius: 200rpx;background-color:#27C5D6;color: #FFF;text-align: center; ">
							<view style="padding:16rpx 80rpx;gap: 12rpx;font-size: 28rpx;">我要搶單</view>
						</view>
					</view>
				</view>
				<!--底欄結束-->
			</view>
		</view>
		
		<!--可預約時間-->
		<u-popup :show="showReserve" mode="bottom" round="48rpx">
			<view class="popup-reserve">
				<view class="popup-reserve-header">
					<view class="site"></view>
					<view class="site title">可預約時間</view>
					<view class="site btn" @click="closeReserve">
						<u-image
							src="/static/images/icon/close.svg"
							width="60rpx"
							height="60rpx"
						></u-image>
					</view>
				</view>
				<view class="popup-reserve-body">
					<view style="background-color: #FAFAFA;border-radius: 24rpx;padding-bottom: 24rpx;">
						<view style="padding:0 56rpx;display: flex;justify-content: space-between;align-items: center;align-self: stretch;">
							<view v-for="(item, index) in weekList" :key="index" >
								<view :class="{'week-item':week!=item.id,'week-item-active':week==item.id}" @click="changeWeek(item.id)">{{item.titlle}}</view>
							</view>
						</view>
						<view class="line"></view>
						<view class="card">
							<view style="display: flex;justify-content: space-between;">
								<view v-for="(item, index) in dateList" :key="index">
									<view style="color: #BEC0C5;font-size: 24rpx;line-height: 140%;text-align: center;">{{item.title}}</view>
									<view v-for="(item_, index_) in item.children" :key="index_">
										<view 
											:class="{'card-item':!checkExistInSimpleArray(item_.id), 'card-item-active':checkExistInSimpleArray(item_.id)}"
										>
											{{item_.title}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="popup-reserve-footer">
							<view class="popup-reserve-footer-tips">
								<view class="popup-reserve-bag active"></view>
								<view class="popup-reserve-bag-title">開放</view>
							</view>
							<view class="popup-reserve-footer-tips">
								<view class="popup-reserve-bag unactive"></view>
								<view class="popup-reserve-bag-title">未開放</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</u-popup>
		<!--可預約時間結束-->
		
		<!--檢舉對方-->
		<u-popup :show="showReport" mode="bottom" round="48rpx">
			<view class="popup-reserve">
				<view class="popup-reserve-header">
					<view style="width: 180rpx;color: #808690;font-size: 32rpx;text-align: left;" @click="showReport=false">取消</view>
					<view style="font-size: 30rpx;color:#232426;font-weight: 600;text-align: center;">檢舉對方?</view>
					<view style="width: 180rpx;color: #27C5D6;font-size: 32rpx;text-align: right;" @click="showReport=false">送出</view>
				</view>
				<view class="popup-reserve-body">
					<view style="color: #FF3D43;font-size:24rpx;width:100%;text-align: center;">檢舉後您將無法再與對方聯繫，請選擇檢舉原因：</view>
					<view style="margin-top: 32rpx;">
						<view v-for="(item,index) in reportList" :key="index">
							<view @click="setReport(item.id)" style="display: flex;justify-content: flex-start;padding: 24rpx;border-radius: 120rpx;background-color: #F6F8FA;margin-bottom: 32rpx;">
								<view>
									<u-image
										v-if="item.id == reportId"
										src="/static/images/icon/success-solid.png"
										width="48rpx"
										height="48rpx"
									></u-image>
									<view v-else style="border-radius: 50%;width: 48rpx;height: 48rpx;background-color: #E5E6E8;"></view>
								</view>
								<view style="margin-left: 32rpx;">{{item.title}}</view>
							</view>
						</view>
						<view v-if="reportId==4" style="padding: 24rpx;border-radius: 120rpx;background-color: #F6F8FA;display: flex;justify-content: flex-start;align-items: center;">
							<u-input name="title" placeholder="請說明原因" v-model="reportTitle" border="none" maxlength="20" @change="handleInput"></u-input>
							<view style="color:#BEC0C5;font-size: 20rpx;display: flex;justify-content: flex-end;">
								{{reportFontNum}} / 100
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</u-popup>
		<!--檢舉對方結束-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				guide:true,
				expertUserInfo:{
					nickname:'Wangyuru',
					avatar:'https://www.onlyrent.tw/uploads/20250403/3563c09c29ec27c38e2f331e52f8a026.jpeg'
				},
				current:0,
				banner_list:[
					'https://ciittomedica.oss-cn-hangzhou.aliyuncs.com/image/banner1.jpg',
					'https://ciittomedica.oss-cn-hangzhou.aliyuncs.com/image/default.jpg',
					'https://ciittomedica.oss-cn-hangzhou.aliyuncs.com/image/banner1.jpg',
					'https://ciittomedica.oss-cn-hangzhou.aliyuncs.com/image/default.jpg',
					'https://ciittomedica.oss-cn-hangzhou.aliyuncs.com/image/banner1.jpg'
				],
				navTab:1,
				richText:`<div style="font-size: 14px;line-height: 1.6; letter-spacing: 0.14px;">
						<div style="margin-top:20rpx;">我正在尋找一位有愛心且有經驗的遛狗達人，來幫忙照顧我的毛孩。</div>
						<div style="margin-top:20rpx;">🐾 狗狗資訊：</div>
						<ul>
							<li style="margin-top:10rpx;">品種：柴犬（活潑好動）</li>
							<li style="margin-top:10rpx;">年齡：3 歲</li>
							<li style="margin-top:10rpx;">體型：中小型，約 10 公斤</li>
							<li style="margin-top:10rpx;">個性：親人友善，喜歡跑步，對其他狗狗有點害羞</li>
							<li style="margin-top:10rpx;">需求：每天約 30 分鐘的散步，偏好安靜的公園或步道</li>
						</ul>
						<div style="margin-top:40rpx;">希望您能提供可服務的時間與相關經驗，讓我們一起確保毛孩擁有最棒的散步體驗！🐕‍🦺💕</div>
						<div style="margin-top:20rpx;color:#1AAEC0;">@penny2560</div>
						<div style="margin-top:20rpx;color:#1AAEC0;">＃狗 ＃遛狗</div></div>`,
				showReserve:false,
				navHeight:840,
				isFixed:false,
				targetElement:{profile:0,timer:0,address:0,evaluate:0},
				week:1,
				weekList:[{
					id:1,
					titlle:'一'
				},{
					id:2,
					titlle:'二'
				},{
					id:3,
					titlle:'三'
				},{
					id:4,
					titlle:'四'
				},{
					id:5,
					titlle:'五'
				},{
					id:6,
					titlle:'六'
				},{
					id:0,
					titlle:'日'
				}],
				dateList:[{
					id:1,
					title:'凌晨',
					children:[{
						id:0,
						title:'00:00'
					},{
						id:1,
						title:'01:00'
					},{
						id:2,
						title:'02:00'
					},{
						id:3,
						title:'03:00'
					},{
						id:4,
						title:'04:00'
					},{
						id:5,
						title:'05:00'
					}]
				},{
					id:2,
					title:'早上',
					children:[{
						id:6,
						title:'06:00'
					},{
						id:7,
						title:'07:00'
					},{
						id:8,
						title:'08:00'
					},{
						id:9,
						title:'09:00'
					},{
						id:10,
						title:'10:00'
					},{
						id:11,
						title:'11:00'
					}]
				},{
					id:3,
					title:'傍晚',
					children:[{
						id:12,
						title:'12:00'
					},{
						id:13,
						title:'13:00'
					},{
						id:14,
						title:'14:00'
					},{
						id:15,
						title:'15:00'
					},{
						id:16,
						title:'16:00'
					},{
						id:17,
						title:'17:00'
					}]
				},{
					id:4,
					title:'晚上',
					children:[{
						id:18,
						title:'18:00'
					},{
						id:19,
						title:'19:00'
					},{
						id:20,
						title:'20:00'
					},{
						id:21,
						title:'21:00'
					},{
						id:22,
						title:'22:00'
					},{
						id:23,
						title:'23:00'
					}]
				}],
				weekRes:[],//当前显示
				dateRes:[[19,21,24],[1,2,3],[1,2,3],[16,19,22],[7,9,10],[12,13],[11]],//结果集
				showReport:false,
				reportList:[{
					id:1,
					title:'惡意騷擾或冒犯言論'
				},{
					id:2,
					title:'詐騙、虛假資訊或不當交易行為'
				},{
					id:3,
					title:'不雅或違反平台規範的內容'
				},{
					id:4,
					title:'其他違規內容'
				}],
				reportId:0,
				reportTitle:'',
				reportFontNum:0
			}
		},
		onLoad(option) {
			
		},
		onPageScroll(e) {
			this.isFixed = e.scrollTop > this.navHeight;
			// console.log(e.scrollTop)
		},
		onReady(){
			const query = uni.createSelectorQuery().in(this)
			query.select('#profile').boundingClientRect(res => {
				this.targetElement.profile = res.top;
			}).exec()
			query.select('#timer').boundingClientRect(res => {
				this.targetElement.timer = res.top;
			}).exec()
			query.select('#address').boundingClientRect(res => {
				this.targetElement.address = res.top;
			}).exec()
			query.select('#evaluate').boundingClientRect(res => {
				this.targetElement.evaluate = res.top;
			}).exec()
		},
		methods:{
			changeNav(type){
				this.navTab = type;
				let scrollTop = 0;
				switch(type){
					case 1:scrollTop = this.targetElement.profile;break;
					case 2:scrollTop = this.targetElement.timer;break;
					case 3:scrollTop = this.targetElement.address;break;
					case 4:scrollTop = this.targetElement.evaluate;break;
					default: ;
				}
				
				uni.pageScrollTo({
					scrollTop:scrollTop,
					duration: 300
				});
			},
			handleClick() {
				// const query = uni.createSelectorQuery().in(this)
				// query.select('#targetElement2').boundingClientRect(res => {
				// 	// const systemInfo = uni.getSystemInfoSync()
				// 	// const navBarHeight = systemInfo.statusBarHeight + 44 // 状态栏+导航栏高度
				// 	const navBarHeight = 0 // 状态栏+导航栏高度
				// 	const scrollTop = 1445
				// 	console.log('res.top:', res)
				// 	// uni.pageScrollTo({ scrollTop, duration: 300 })
				// }).exec()
				
				uni.pageScrollTo({
					scrollTop:this.targetElement.profile,
					duration: 300
				});
			},
			closeReserve(){
				this.showReserve = false;
			},
			checkExistInSimpleArray(id) {
				return this.weekRes.includes(id);
			},
			changeWeek(id){
				this.dateRes[this.week] = this.weekRes;
				this.week = id;
				this.weekRes = this.dateRes[id];
			},
			setReport(id){
				this.reportId = id;
			},
			handleInput(){
				this.reportFontNum = this.reportTitle.replace(/[\s\n]/g, '').length;
			},
		}
	}
</script>

<style lang="scss" scoped>
.warp{
	width: 100%;
	min-height: 100vh;
	
	.indicator{
		justify-content: center;
		@include flex(row);
		
		&__dot {
			height: 8rpx;
			width: 32rpx;
			border-radius: 4rpx;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 6px;
			transition: background-color 0.3s;
	
			&--active {
				background-color: #ffffff;
			}
		}
	}
	.fixed-nav{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 10rpx;
	}
	.tab-nav{
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding-bottom: 8rpx;
		border-bottom: 2rpx solid #F6F8FA;
		background-color: #ffffff;
		z-index: 999;
		
		.tab-nav-item{
			font-size: 28rpx;
			color: #808690;
			padding-bottom: 12rpx;
		}
		.tab-nav-item-active{
			font-size: 28rpx;
			color: #1AAEC0;
			padding-bottom: 12rpx;
			border-bottom: 3rpx solid #1AAEC0;
			font-weight: 500;
		}
	}
	.tab-content{
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		p {
			line-height: 1.5;/* 行高为字体大小的1.5倍 */
			margin: 1em 0; 
		}
	}
	.popup-reserve{
		padding: 58rpx 40rpx 28rpx;
		
		.popup-reserve-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.site{
				width: 180rpx;
			}
			.title{
				font-size: 30rpx;
				font-weight: 600;
			}
			.btn{
				display: flex;
				justify-content: flex-end;
			}
		}
		.popup-reserve-body{
			margin-top: 40rpx;
			
			.week-item{
				font-size: 32rpx;
				text-align: center;
				font-weight: 500;
				line-height: 140%;
				letter-spacing: 0.64rpx;
				padding: 32rpx 0 24rpx;
				color: rgba(190, 192, 197, 0.50);
			}
			.week-item-active{
				font-size: 32rpx;
				text-align: center;
				font-weight: 500;
				line-height: 140%;
				letter-spacing: 0.64rpx;
				padding: 32rpx 0 24rpx;
				color: #020202;
				border-bottom: 2rpx solid #020202;
			}
			.line{
				width: 100%;
				height: 1rpx;
				background-color: #F6F8FA;
				
			}
			.card{
				padding: 40rpx 32rpx 0;
				box-sizing: border-box;
			}
			.card-item{
				padding: 6px 15px;
				border-radius: 12px;
				background-color: #F6F8FA;
				color: #6A707C;
				font-size: 24rpx;
				margin-top: 32rpx;
			}
			.card-item-active{
				padding: 6px 15px;
				border-radius: 12px;
				background-color: #27C5D6;
				color: #fff;
				font-size: 24rpx;
				margin-top: 32rpx;
			}
			.card-footer{
				padding: 48rpx 32rpx 32rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.card-footer-info{
				margin-left: 16rpx;
				color: #232426;
				font-size: 24rpx;
				line-height: 140%;
				letter-spacing: 0.24px;
			}
			.card-footer-radio{
				border-radius: 50%;
				width: 48rpx;
				height: 48rpx;
				background-color: #E5E6E8;
			}
			
			.popup-reserve-footer{
				width: 100%;
				margin-top: 48rpx;
				display: flex;
				justify-content: center;
				
				.popup-reserve-footer-tips{
					display: flex;
					justify-content: center;
					margin: 0 4rpx;
					align-items: center;
				}
				
				.popup-reserve-bag-title{
					color:#232426;
					font-size: 24rpx;
					line-height: 140%;
					letter-spacing: 0.48rpx;
				}
				
				.popup-reserve-bag{
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}
				.unactive{
					background-color: #E5E6E8;
				}
				.active{
					background-color: #27C5D6;
				}
			}
		}
	}
}
</style>